<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6类</title>
</head>
<body>
  <script>
    
    /* 
    需求: 
        现在2个人, 都有姓名与年龄(值自己指定), 都能自我介绍自己的姓名和年龄
        现在又有了一个学生, 它有身价的属性, 能介绍它的所有信息
    */

    /* 
    注意: React会使用class
    ES6类: 构造器 / 实例属性 / 实例方法 / 原型方法 / 静态属性 / 继承
      构造器: 创建实例时调用的特殊方法 => 用来给实例添加属性或方法
      实例属性: propName=非函数值
      实例方法: propName = 函数
          function函数: 实例来调用this就是实例对象, 取出后直接调用this是undefined  严格模式
          箭头函数: 无论怎么调用, 都是实例对象 
            => 实例属性/方法本质都 是定义在构造器中定义执行的, 箭头函数使用的就外部构造器的this
                构造器中的this总是实例对象
      原型方法: methodName () {}
      静态属性: static propName = 值  是类本身的属性
      继承: extends 子类构造器中必须先调用super()
    */


    class Person {
      static test5 = 'atguigu'
      static test6 = function () {
        console.log('test6', this)
      }

      constructor (name, age) {
        // 给实例添加属性
        this.name = name
        this.age = age
        // 给实例添加方法
        this.test1 = function () {
          console.log('test1', this)
        }

        /* this.test2 = 'abc'
        this.test3 = function () {
          console.log('test3', this)
        }
        this.test4 = () => {
          console.log('test4', this)
        } */
      }

      // 实例属性
      test2 = 'abc'
      // 实例方法
      test3 = function () {
        console.log('test3', this)
      }
      test4 = () => {
        console.log('test4', this)
      }
      // 原型方法
      test7() {
        console.log('test7', this)
      }

      
      sayInfo () {
        console.log(`我叫${this.name}, 今年${this.age}`)
      }
    }

    class Student extends Person {
      constructor (name, age, price) {
        // 调用父类的构造器, 来初始子类实例的属性
        super(name, age) // 必须有
        this.price = price
      }
      // 重写从父类中继承的方法
      sayInfo () {
        console.log(`我叫${this.name}, 今年${this.age}, 月入${this.price}`)
      }

      test8 () {
        console.log('test8')
      }
    }

    const s = new Student('C', 22, 15000)
    console.log(s)
    s.sayInfo()
    s.test8()
    
    // const p1 = new Person('A', 21)
    // const p2 = new Person('B', 22)
    // p1.sayInfo()
    // p2.sayInfo()
    // console.log(p2)
    // p2.test1()
    // console.log(p2.test2)
    // p2.test3()
    // p2.test4()
    // console.log(Person.test5)
    // Person.test6()
    // p2.test7()

    // console.log('-------')
    // const f3 = p2.test3
    // const f4 = p2.test4
    // f3() // undefined
    // f4() // 实例对象

    
  </script>
</body>
</html>